import "package:flutter/material.dart";

// 观看历史
class AnimateWatchHistory {
  String episodes; //观看到集数
  String progress; //观看进度 0-100(%)
  AnimateWatchHistory({
    required this.episodes,
    required this.progress,
  });
}

class AnimateWatchingItem {
  String coverUrl; //封面
  String title; //标题
  String status; //更新状态 0未更新（敬请期待）、1更新至、2已完结（全x话）
  String episodes; //更新集数
  AnimateWatchHistory? watchHistory; //观看历史（null尚未观看）
  AnimateWatchingItem({
    required this.coverUrl,
    required this.title,
    required this.status,
    required this.episodes,
    this.watchHistory,
  });
}

class AnimateWatching extends StatelessWidget {
  final List<AnimateWatchingItem> list = [
    AnimateWatchingItem(
      coverUrl: "./images/1.jpg",
      title: "鬼灭之刃 柱训练篇",
      status: "1",
      episodes: "4",
      watchHistory: null,
    ),
    AnimateWatchingItem(
      coverUrl: "./images/3.jpg",
      title: "吹响吧！上低音号 第三季",
      status: "2",
      episodes: "13",
      watchHistory: AnimateWatchHistory(
        episodes: '2',
        progress: '1',
      ),
    ),
    AnimateWatchingItem(
      coverUrl: "./images/1.jpg",
      title: "香格里拉边境",
      status: "2",
      episodes: "25",
      watchHistory: AnimateWatchHistory(
        episodes: '24',
        progress: '2',
      ),
    ),
    AnimateWatchingItem(
      coverUrl: "./images/3.jpg",
      title: "葬送的芙莉莲",
      status: "2",
      episodes: "28",
      watchHistory: AnimateWatchHistory(
        episodes: '28',
        progress: '100',
      ),
    ),
    AnimateWatchingItem(
      coverUrl: "./images/1.jpg",
      title: "擅长捉弄的高木同学",
      status: "2",
      episodes: "12",
      watchHistory: null,
    ),
  ];
  AnimateWatching({super.key});
  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: SizedBox(
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.only(left: 6, right: 6),
              child: const Row(
                children: [
                  Expanded(
                    child: Row(
                      children: [
                        Padding(
                          padding: EdgeInsets.only(right: 4),
                          child: Icon(
                            Icons.access_time_outlined,
                            size: 18,
                          ),
                        ),
                        Text(
                          '正在追',
                          style: TextStyle(
                            fontSize: 14,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Row(
                    children: [
                      Text(
                        '我的追番',
                        style: TextStyle(
                          fontSize: 12,
                          color: Color.fromARGB(255, 143, 149, 156),
                        ),
                      ),
                      Icon(
                        Icons.keyboard_arrow_right_outlined,
                        size: 16,
                        color: Color.fromARGB(255, 143, 149, 156),
                      ),
                    ],
                  )
                ],
              ),
            ),
            Container(
              height: 185,
              margin: const EdgeInsets.only(top: 8),
              width: double.infinity,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: list.length,
                itemBuilder: (BuildContext contain, int index) {
                  AnimateWatchingItem e = list[index];
                  String episodesStr = '';
                  String historyStr = '';
                  Color historyStrColor = Colors.black38;
                  if (e.status == '0') {
                    episodesStr = '敬请期待';
                  } else if (e.status == '1') {
                    episodesStr = '更新至第${e.episodes}话';
                  } else if (e.status == '2') {
                    episodesStr = '全${e.episodes}话';
                  }
                  if (e.watchHistory == null) {
                    historyStr = '尚未观看';
                  } else {
                    historyStr =
                        '看到第${e.watchHistory!.episodes}话 ${e.watchHistory!.progress}%';
                    if (e.watchHistory!.progress != '100') {
                      historyStrColor =
                          const Color.fromARGB(255, 249, 104, 152);
                    }
                  }
                  return Container(
                    margin: EdgeInsets.only(
                      right: index == list.length ? 4 : 0,
                      left: 4,
                    ),
                    width: 266,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(6),
                          child: Stack(
                            children: [
                              SizedBox(
                                width: double.infinity,
                                height: 142,
                                child: Image.asset(
                                  e.coverUrl,
                                  fit: BoxFit.cover,
                                ),
                              ),
                              Positioned(
                                bottom: 0,
                                left: 0,
                                right: 0,
                                child: Container(
                                  width: double.infinity,
                                  height: 35,
                                  decoration: const BoxDecoration(
                                    gradient: LinearGradient(
                                      begin: Alignment.bottomCenter,
                                      end: Alignment.topCenter,
                                      colors: [
                                        Color.fromARGB(120, 0, 0, 0),
                                        Color.fromARGB(80, 0, 0, 0),
                                        Color.fromARGB(40, 0, 0, 0),
                                        Color.fromARGB(0, 0, 0, 0),
                                      ],
                                    ),
                                  ),
                                  child: Stack(
                                    children: [
                                      Positioned(
                                        right: 4,
                                        bottom: 4,
                                        child: Text(
                                          episodesStr,
                                          style: const TextStyle(
                                            color: Colors.white,
                                            fontSize: 10,
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 4),
                          child: Text(
                            e.title,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        Text(
                          historyStr,
                          style: TextStyle(
                            color: historyStrColor,
                            fontSize: 12,
                          ),
                        )
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
